<template>
  <el-container>
    <el-header>
      <router-link :to="{ name: 'Home' }" class="gotohome"
        ><h1>前端题库网</h1></router-link
      >
      <router-link :to="{ name: 'Home' }" class="gotohome"
        >回到首页</router-link
      ></el-header
    >
    <el-main>
      <h2>个人中心</h2>
      <div class="mainbox">
        <div class="infobox">
          <div
            class="infoImgitem"
            @mouseover="Ashow = true"
            @mouseout="Ashow = false"
          >
            <label for="t">
              <input id="t" class="imgFile" type="file" @change="updatePhoto" />
              <img
                :src="
                  userinfo.url
                    ? userinfo.url
                    : 'https://res.kaikeba.com/image/123/20210917011829-82211/FoPH46uy2lca-tLzEGEgGsvaO2_A.jpeg'
                "
                alt=""
              />
              <div v-show="Ashow">更换头像</div>
            </label>
          </div>
          <div class="infoitem">
            <span> 个性签名: {{ !lifeTalkshow ? userinfo.lifeTalk : "" }}</span>
            <input
              type="text"
              v-model="inplifeTalk"
              v-show="lifeTalkshow"
              ref="lifeTalkinp"
            />
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              v-show="!lifeTalkshow"
              @click="lifeTalkEdit"
            ></el-button>
            <el-button
              type="info"
              circle
              v-show="lifeTalkshow"
              @click="sureLifeTalk"
              >确认</el-button
            >
            <el-button
              type="info"
              circle
              v-show="lifeTalkshow"
              @click="cancelLiftTalk"
              >取消</el-button
            >
          </div>
        </div>
      </div>
    </el-main>
    <el-footer> xxx科技©2021 All rights reserved admin@xxxxxxxx.com </el-footer>
  </el-container>
</template>

<script>
import { apiGetUserInfo, apiUpdateImg, apiUpdateUserinfo } from "../api/user";
export default {
  data() {
    return {
      inplifeTalk: "",
      lifeTalkshow: false,
      Ashow: false,
      uploadPhotos: "",
      userinfo: {
        url: "",
        lifeTalk: "",
      },
    };
  },
  created() {
    this.getuserInfo();
  },
  computed: {
    username() {
      return this.$store.state.user.username;
    },
    uid() {
      return this.$store.getters.Uid;
    },
  },
  methods: {
    lifeTalkEdit() {
      this.lifeTalkshow = true;
      this.inplifeTalk = this.userinfo.lifeTalk;
    },
    async sureLifeTalk() {
      this.userinfo.lifeTalk = this.inplifeTalk;
      this.lifeTalkshow = false;
      apiUpdateUserinfo({ lifeTalk: this.userinfo.lifeTalk, uid: this.uid });
    },
    cancelLiftTalk() {
      this.lifeTalkshow = false;
    },
    async getuserInfo() {
      const { data } = await apiGetUserInfo({ uid: this.uid });
      this.userinfo.url = data.data[0].PortraitUrl;
      this.userinfo.lifeTalk = data.data[0].lifeTalk;
    },
    async updatePhoto(e) {
      this.uploadPhotos = e.target.files[0];
      const formData = new FormData();
      formData.append("img", this.uploadPhotos);
      const res = await apiUpdateImg(formData, this.uid);
      if (res.data.state !== 200) return this.$message.error("上传失败");
      const render = new FileReader();
      render.readAsDataURL(this.uploadPhotos);
      render.onload = () => {
        this.userinfo.url = render.result;
      };
    },
  },
};
</script>

<style lang="less" scoped>
.el-container {
  width: 100vw;
  height: 100vh;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-header h1 {
  margin-left: 20%;
  float: left;
  line-height: 50%;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  display: flex;

  justify-content: center;
  flex-wrap: wrap;
}
.mainbox {
  width: 60%;
  height: 80%;
  display: flex;
  justify-content: center;
  .infobox {
    width: 50%;
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .infoitem {
      display: flex;
      margin-top: 5%;
      margin-left: 20%;
      width: 70%;
      input {
        height: 70%;
      }
      span {
        display: inline-block;
        width: 80%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
    .infoImgitem {
      margin: 5% 0;
      border-radius: 50%;
      border: 1px solid #e9eef3;
      width: 25%;
      height: 25%;
      overflow: hidden;
      position: relative;
      text-align: center;
      .imgFile {
        position: absolute;
        opacity: 0;
      }
      img {
        width: 100%;
      }
      div {
        width: 100%;
        position: absolute;
        top: 70%;
        background-color: #99a9bf;
      }
    }
  }
}

.gotohome {
  color: black;
}

a {
  text-decoration: none;
}
h2 {
  width: 70%;
  text-align: center;
}
.el-form-item {
  text-align: left;
  width: 100%;
}

.el-form-item .inbox {
  display: inline-block;
  width: 100px;
  font-size: 20px;
  color: #99a9bf;
}
.el-form-item span {
  font-size: 16px;
}
.red {
  color: red;
}
</style>